<template>
  <a-modal
    :visible="visible"
    @ok="handleOk"
    @cancel="handleCancel"
    :width="800"
    :unmount-on-close="true"
  >
    <template #title> {{ title }} </template>
    <div class="search">
      物料名称：
      <a-input-search
        search-button
        @press-enter="tableRef.loadData()"
        style="width: 200px; margin: 0 20px"
        v-model="keyWord"
        @search="tableRef.loadData()"
      ></a-input-search>
      <a-space>
        <!-- <a-button

        >
          <template #icon>
            <icon-loop />
          </template>
          <template #default>重置</template>
        </a-button> -->
        <a-button
          type="outline"
          @click="
            () => {
              keyWord = '';
              tableRef.loadData();
            }
          "
        >
          <template #icon> <icon-refresh /> </template>重置</a-button
        >
        <a-button
          type="primary"
          v-if="props.isClientHistory"
          @click="openHistoryModel"
          >客户历史记录</a-button
        >
      </a-space>
    </div>
    <TableTurn
      :table-data="getData"
      ref="tableRef"
      :args="{
        rowSelection: {
          type: 'checkbox',
          showCheckedAll: true,
          onlyCurrent: false,
        },
      }"
    >
      <a-table-column :width="80" align="center">
        <template #title> 序号 </template>
        <template #cell="{ rowIndex }">
          {{ rowIndex + 1 }}
        </template>
      </a-table-column>

      <a-table-column
        :width="150"
        align="center"
        title="物料编码"
        data-index="number"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="物料名称"
        data-index="name"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="规格型号"
        data-index="spec"
      >
      </a-table-column>
      <a-table-column
        :width="150"
        align="center"
        title="所属分类"
        data-index="materialName"
      >
      </a-table-column>
    </TableTurn>
  </a-modal>

  <historyModel
    v-model:visible="historyModelVisible"
    v-if="historyModelVisible"
    :clientId="props.clientId"
    @searcchData="searcchData"
  ></historyModel>
</template>

<script lang="ts" setup>
  import { reactive, ref } from 'vue';
  import { GetMaterialList } from '@/api/inventory-management/material-management';
  import { cloneDeep } from 'lodash';
  import { Message } from '@arco-design/web-vue';
  import historyModel from './components/historyModel.vue';

  const props = withDefaults(
    // 参数说明
    defineProps<{
      visible?: boolean;
      title: string;
      ages?: any;
      categoryName?: string;
      isClientHistory?: boolean;
      clientId?: number;
    }>(),
    {
      visible: false,
      categoryName: '',
      isClientHistory: false,
    }
  );
  const emit = defineEmits(['changeVisible', 'searcchMaterialData']);
  const keyWord = ref('');
  let tableRef = ref();
  const handleOk = () => {
    emit('searcchMaterialData', cloneDeep(tableRef.value.selectedList));
    emit('changeVisible', false);
  };
  const handleCancel = () => {
    emit('changeVisible', false);
  };
  const historyModelVisible = ref(false);
  const getData = async (page: { page: number; size: number }) => {
    try {
      const res = await GetMaterialList({
        ...page,
        name: keyWord.value,
        categoryName: props.categoryName,
      });
      return Promise.resolve(res);
    } catch (error) {
      console.log(error);
    }
  };

  const openHistoryModel = () => {
    if (props.clientId) historyModelVisible.value = true;
    else Message.error('请选择客户');
  };

  const searcchData = (res: any) => {
    emit('searcchMaterialData', cloneDeep(res));
    emit('changeVisible', false);
  };
</script>

<style lang="less" scoped>
  .search {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
  }
</style>
